<template>
    <div style="background: #F7F7F7">
        <div style="background: #F7F7F7">
			<div class="autoall">
				<div class="mt-20"></div>
				<div class="input1">
					<p>真实姓名</p>
					<input type="text" placeholder="请填写姓名" v-model="na">
				</div>
				
				<div class="everyinput" @click="phone()">
					<p>我的手机号</p>
					<div class="inputright">
						<div class="phright">{{tel}}</div>
						<div class="phpic">
							<img src="../../assets/img/my-left.png" alt="">
						</div>
					</div>
				</div>
				
				<div class="mt-20"></div>
				<div class="input1 input1stu">
					<p>学校</p>
					<input type="text" placeholder="请填写您的学校" v-model="student">
				</div>
				<div class="input1">
					<p>校内专业</p>
					<input type="text" placeholder="请填写您学校内所学专业" v-model="studentchoose">
				</div>
				
				<div class="mt-20"></div>
				<div class="everyinput" @click="major()">
					<p>职业</p>
					<div class="inputright">
						<div class="phright">{{maj}}</div>
						<div class="phpic">
							<img src="../../assets/img/my-left.png" alt="">
						</div>
					</div>
				</div>
				
				
				<div class="everyinput" @click="majorchoose()">
					<p>报考方向</p>
					<div class="inputright">
						<div class="phright">{{majchoose}}</div>
						<div class="phpic">
							<img src="../../assets/img/my-left.png" alt="">
						</div>
					</div>
				</div>
			</div>
				
			<div class="blue" @click="bao()">保存</div>


        <!--插件-->
        <mt-popup v-model="popupVisible" position="bottom" style="width: 100%">
          <mt-picker :slots="slots" @change="onValuesChange" :showToolbar = 'constState' class="picker">
            <mt-button size="small" style="background: #fff;float: left" @click.native="popupVisible = !popupVisible">取消</mt-button>
            <mt-button size="small" style="float: right;background: #fff;" @click.native="sure()">确定</mt-button>
          </mt-picker>
        </mt-popup>

		<mt-popup v-model="popupVisible1" position="bottom" style="width: 100%">
		  <mt-picker :slots="slots1" @change="onValuesChange1" :showToolbar = 'constState1' class="picker" value-key='name'>
			<mt-button size="small" style="background: #fff;float: left" @click.native="popupVisible1 = !popupVisible1">取消</mt-button>
			<mt-button size="small" style="float: right;background: #fff;" @click.native="sure1()">确定</mt-button>
		  </mt-picker>
		</mt-popup>



        </div>
			<!-- 更换手机号 -->
			<div class="shoewr-chenhoupass">
				<div class="chen-contener chenpass">
					<p class="chen-title">提示</p>
					<p class="chen-text chen-textactive">您需要更换手机号吗？</p>
					<div class="chen-but">
						<p class="chen-but-no" @click="repeatclose()">取消</p>
						<p class="chen-but-yes" @click="repeatclick()">去更换</p>
					</div>
				</div>
			</div>
    </div>
</template>

<script>
  import { MessageBox } from 'mint-ui';
    export default {
        name: "People",
        data(){
			return{
				tel:'',
				slots: [
					{
						values: ["请选择职业",'学生', '在职',],
					}
				],
				slots1: [
					{
					values: [],
					}
				],
				popupVisible:false,
				maj:'请选择职业',
				jor:'',
				na:'',
				bol:'',
				constState:true,
				constState1:true,
				majchoose:'请选择报考方向',
				popupVisible1:false,
				chooseid:'',
				chooseid1:'',
				majchoose1:'',
				student:'',
				studentchoose:'',
			}
        },
        methods:{
			major(){
			  this.popupVisible = !this.popupVisible
			},
			majorchoose(){
			   this.popupVisible1 = !this.popupVisible1
			},
			repeatclose(){
				$('.shoewr-chenhoupass').fadeOut();
			},
			repeatclick(){
				$('.shoewr-chenhoupass').fadeOut();
				this.$router.push({
					path:'/now',
					query:{
						tel:this.tel,
					}
				})
			},
			phone(){
				$('.shoewr-chenhoupass').fadeIn();
			},
			onValuesChange(picker, values) {
				if (this.popupVisible == true){
					this.jor = values[0];
				}
			},
			onValuesChange1(picker, values,defaultIndex) {
			    if (this.popupVisible1 == true){
					this.chooseid1 = values[0].id;
					this.majchoose1 =values[0].name;
			    }
			},
			sure(){
			    this.popupVisible = !this.popupVisible;
				if(this.jor==''){
					this.maj ='请选择职业';
				}else{
				    this.maj = this.jor;
				}
			},
			sure1(){
			    this.popupVisible1 = !this.popupVisible1;
				this.chooseid = this.chooseid1;
				this.majchoose =this.majchoose1;
			},
			bao(){
				var nae = this.na;
				var name = nae.replace(/\s+/g, "");
				// console.log(this.student);
				if(name==''){
					this.$toast({
					  message:'请填写姓名',
					  position:'bottom'
					});
				}else if(!(/^[\u2E80-\u9FFF]+$/.test(name))){
					this.$toast({
					  message:'姓名只能为汉字',
					  position:'bottom'
					});
				}
				else if (this.maj == "请选择职业"){
					this.$toast({
					  message:'请选择职业',
					  position:'bottom'
					});
				}else if (this.majchoose == "请选择报考方向"){
					this.$toast({
					  message:'请选择报考方向',
					  position:'bottom'
					});
				}else if (this.student == ""){
					this.$toast({
					  message:'请填写您的学校',
					  position:'bottom'
					});
				}else if (this.studentchoose == ""){
					this.$toast({
					  message:'请填写您学校内所学专业',
					  position:'bottom'
					});
				}else{
						
					var data = {
						major:this.maj, //专业
						name:this.na,
						subject:this.chooseid,
						school:this.student,
						learn:this.studentchoose,
						
					}
					this.axios.post(this.$store.state.url + "User/completeInfo",data).then(res=>{
					    if (res.data.errcode == 0||res.data.errcode == '0'){
							this.$toast({
							   message:'保存成功',
							   position:'bottom'
							});
						    this.$router.go(-1);
					    } else {
							this.$toast({
							   message:res.data.msg,
							   position:'bottom'
							});
					    }
					})
			    }

			},
			choosesubject(subject){
				var that = this;
				that.axios({
					url:that.$store.state.url + "MyTk/getSubject",
				}).then(res=>{
					if(res.data.errcode==0||res.data.data.errcode=='0'){
						var data =res.data.data; 
						var datafirst = [{id:0,name:'请选择报考方向'}]
						var data1 = datafirst.concat(data);
						that.slots1[0].values = data1;
						
						var datasubject = data1;
						for(var i=0;i<datasubject.length;i++){
							if(subject==datasubject[i].id){
								that.majchoose=datasubject[i].name;
							}
						}
					}
				})
			},
        },
        mounted() {
			this.sdk.getJSSDK('','',this.$store.state.url);	
			// 获取个人信息
			this.axios.get(this.$store.state.url + "User/getUserInfo").then(res=>{
				if (res.data.errcode == 0||res.data.errcode == '0'){
					var data = res.data.data;
					if(data.name==''){
					}else{
					  this.na = data.name;
					}
					if(data.major==''){
						this.maj='请选择职业'
					}else{
					  this.maj = data.major;
					}
					if(data.school){
						this.student = data.school;
					}
					
					if(data.learn){
						this.studentchoose = data.learn;
					}
					
					
					
					this.choosesubject(data.subject);
					var tel = data.tel;
					if(tel!=''){
						var tel1 = tel.substr(0,3)+"****"+tel.substr(7);
						this.tel = tel1;
					}else{
						this.tel = '请绑定'
					}
				}
			})
        },

    }
</script>

<style scoped>
	.mt-20{
		width: 100%;
		height: .2rem;
		background: #f7f7f7;
	}
	.autoall{
		width: 100%;
		background: #fff;
	}
	.everyinput{
		  width: 6.9rem;
		  height: .9rem;
		  margin: auto;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
	}
	.everyinput p{
		  color: #333333;
		  font-size: .3rem;
	}
	.inputright{
		  display: flex;
		  justify-content: flex-end;
		  align-items: center;
	}
	.phright{
		  color: #999999;
		  font-size: .3rem;
	}
	.phpic{
		  width: .1rem;
		  height: .2rem;
		  margin-left: .1rem;
	}
	.phpic img{
		  width: 100%;
		  height: 100%;
	}
  .picker{
    width: 100%;
  }
  .blue{
    width: 6.9rem;
    height: 0.88rem;
  	line-height: .88rem;
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
  	margin-left: -3.45rem;
    background: #0287FF;
    font-size: 0.36rem;
  	text-align: center;
  	color: #FFFFFF;
  	border-radius: .1rem;
  }
  .input1{
    height: 0.9rem;
    display: flex;
    align-items: center;
    background: #fff;
	padding: 0 .3rem;
  }
  .input1 p{
	  width: 20%;
    font-size: 0.30rem;
    color: rgba(51,51,51,1);
  }
  input{
    width: 80%;
    height: 100%;
    text-align: right;
    font-size: 0.3rem;
    color: #8f8f8f;
  }
  input:focus::placeholder{
	  color: transparent;
	  font-size: 0.3rem;
  }
  input::placeholder{
    font-size: 0.3rem;
    color: #8f8f8f;
  }

</style>
